import React, { useState } from 'react';
// 注册页第一步组件
import { Form, Input, Button, Toast, Modal } from 'antd-mobile';
// 导入接口
import { dofinishregisterApi } from '@/api/regist'
// 导入路由hooks
import { useHistory, useLocation } from 'react-router-dom';
const Step1 = () => {
    const [form] = Form.useForm();
    const his = useHistory();
    const loc = useLocation();
    // 设置完成按钮是否禁用
    const [isdisabled, setDisabled] = useState(true)
    //点击下一步执行的方法
    const onSubmitFn = () => {
        const values = form.getFieldsValue();
        values.tel = loc.state.tel
        // console.log('values', values);
        dofinishregisterApi(values).then(res => {
            // console.log(res);
            if (res.data.code == 200) {
                // 注册成功,提示注册成功, 并点击确定跳转到登录页
                Modal.alert({
                    title: '提示',
                    content: '注册成功!!!',
                    showCloseButton: true,
                    // 改一下文本:
                    afterClose() {
                        console.log('点击确认');
                        his.push('/login')
                    }
                })
            } else {
                //注册失败, 给出提示
                Toast.show({
                    icon: 'fail',
                    content: '注册失败',
                })
            }

        })
    };

    return (
        <div style={{
            marginTop: '10px'
        }}>
            <Form
                layout='horizontal'
                form={form}
                footer={
                    <Button disabled={isdisabled} block type='submit' onClick={onSubmitFn} color='primary' size='large'>
                        完成
                    </Button>
                }
            >
                <Form.Item
                    name='password'
                    label='密码'
                >
                    <Input type='text' onChange={(value) => {
                        // console.log('value', value)
                        // if (/^\w{6}$/.test(value)) {
                        //     setDisabled(true)
                        // } else {
                        //     setDisabled(false)
                        // }
                        let reg = /^\w{6}$/;
                        reg.test(value) ? setDisabled(false) : setDisabled(true)

                    }} />
                </Form.Item>
            </Form>
        </div>
    );
}

export default Step1;
